<template>
  <div class="permission-management">
    <!-- 其他代码... -->
    <el-dialog title="创建权限" :visible.sync="createPermissionDialogVisible" width="50%">
      <el-form ref="createForm" :model="createForm" label-width="100px">
        <el-form-item label="权限名称">
          <el-input v-model="createForm.permissionName" :ref="$refs.createForm.getField('permissionName')"></el-input>
        </el-form-item>
        <el-form-item label="权限类型">
          <el-select v-model="createForm.type" placeholder="请选择权限类型">
            <el-option label="目录" value="directory"></el-option>
            <el-option label="菜单" value="menu"></el-option>
            <el-option label="按钮" value="button"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择父级权限">
          <el-tree :data="treeData" :props="treeProps" show-checkbox default-expand-all></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelCreatePermission">取消</el-button>
        <el-button type="primary" @click="createPermission">创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElTree } from 'element-plus';

export default {
  components: {
    ElTree,
  },
  setup() {
    const createPermissionDialogVisible = ref(false);
    const createForm = ref({
      permissionName: '',
      type: '',
      parentId: '',
    });

    const treeData = ref([
      {
        id: 1,
        label: '权限管理',
        children: [
          {
            id: 2,
            label: '用户管理',
          },
          {
            id: 3,
            label: '角色管理',
          },
        ],
      },
      {
        id: 4,
        label: '系统设置',
        children: [
          {
            id: 5,
            label: '参数配置',
          },
          {
            id: 6,
            label: '日志管理',
          },
        ],
      },
    ]);

    const treeProps = {
      children: 'children',
      label: 'label',
      value: 'id',
    };

    const showCreatePermissionDialog = () => {
      createPermissionDialogVisible.value = true;
    };

    const cancelCreatePermission = () => {
      createPermissionDialogVisible.value = false;
    };

    const createPermission = () => {
      const checkedNodes = $refs.tree.getCheckedNodes(); // 获取选中的节点列表
      console.log(createForm.value);
      console.log('选中的节点：', checkedNodes);
      // 发送请求，保存权限数据等
      // ...

      createPermissionDialogVisible.value = false;
    };

    return {
      createPermissionDialogVisible,
      createForm,
      treeData,
      treeProps,
      showCreatePermissionDialog,
      cancelCreatePermission,
      createPermission,
    };
  },
};
</script>
